<!doctype html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Gauge Test</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      background: #fff
    }
  </style>
</head>

<body>

  <button onclick="animateGauges()">Animate</button>
  <button onclick="stopGaugesAnimation()">Stop animation</button>

  <hr>

  <table>
    <tbody>
      <tr>
        <td>
          <canvas data-type="radial-gauge" data-value="40" data-width="400" data-height="400" data-bar-width="10"
            data-bar-shadow="5" data-color-bar-progress="rgba(50,200,50,.75)" data-bar-start-position="left"></canvas>
        </td>
        <td>
          <canvas data-type="radial-gauge" data-value="40" data-width="400" data-height="400" data-bar-width="2"
            data-bar-shadow="0" data-border-inner-width="0" data-border-outer-width="0" data-border-middle-width="0"
            data-color-bar-progress="rgba(50,50,200,.75)" data-color-bar="#aae" data-color-needle="rgba(50,50,200,.75)"
            data-color-needle-end="#aae" data-highlights="false" data-value-box-border-radius="0"
            data-value-box-stroke="1" data-color-value-box-shadow="0" data-needle-type="line" data-needle-width="1"
            data-needle-circle-size="5" data-needle-circle-inner="false" data-needle-start="0"
            data-color-needle-circle-outer="rgba(50,50,200,.75)" data-color-needle-circle-outer-end="#aae"
            data-stroke-ticks="0" data-major-ticks="100,80,60,40,20,0" data-bar-start-position="right"></canvas>
        </td>
        <td>
          <canvas data-type="radial-gauge" data-value="40" data-width="400" data-height="400" data-bar-width="20"
            data-bar-shadow="1" data-color-bar-progress="rgba(200,50,50,.75)" data-color-bar="#eaa"
            data-border-shadow-width="0" data-border-inner-width="0" data-border-outer-width="0"
            data-border-middle-width="0" data-highlights="false" data-value-box-stroke="0"
            data-color-value-box-shadow="0" data-value-box-border-radius="0" data-value-text-shadow="0"
            data-color-value-box-background="transparent" data-needle="false" data-bar-start-position="middle"></canvas>
        </td>
      </tr>
      <tr style="text-align: center; font-size: 24px;">
        <td>
          <strong>Clockwise progress bar</strong>
        </td>
        <td>
          <strong>Anti-clockwise progress bar</strong>
        </td>
        <td>
          <strong>Middle start point progress bar</strong>
        </td>
      </tr>
    </tbody>
  </table>


  <script async src="../gauge.min.js"></script>

  <script>
    if (!Array.prototype.forEach) {
      Array.prototype.forEach = function (cb) {
        var i = 0, s = this.length;
        for (; i < s; i++) {
          cb && cb(this[i], i, this);
        }
      }
    }

    document.fonts && document.fonts.forEach(function (font) {
      font.loaded.then(function () {
        if (font.family.match(/Led/)) {
          document.gauges.forEach(function (gauge) {
            gauge.update();
          });
        }
      });
    });

    var timers = [];

    function animateGauges() {
      document.gauges.forEach(function (gauge) {
        timers.push(setInterval(function () {
          var min = gauge.options.minValue - 20;
          var max = gauge.options.maxValue + 20;

          gauge.value = min + Math.random() * (max - min);
        }, gauge.animation.duration + 50));
      });
    }

    function stopGaugesAnimation() {
      timers.forEach(function (timer) {
        clearInterval(timer);
      });
    }
  </script>

</body>

</html>
